<template>
 <div id="salary">
     <div>
         <el-row>
            <el-autocomplete class="inline-input" v-model="input" :fetch-suggestions="querySearch"
                    placeholder="员工姓名"
                    :trigger-on-focus="false" clearable @clear="getAllsalary">
            </el-autocomplete>
            <el-button type="primary" icon="el-icon-search" @click="search()">搜索</el-button>
         </el-row>
     </div>
    <el-table :data="tableData" height="325" border style="width: 100%" v-loading="loading">
        <el-table-column fixed prop="sid" label="员工编号"></el-table-column>
        <el-table-column fixed prop="sname" label="姓名"></el-table-column>
        <el-table-column prop="sdname" label="部门"></el-table-column>
        <el-table-column prop="spname" label="职位"></el-table-column>
        <el-table-column prop="spay" label="基本薪资"></el-table-column>
        <el-table-column prop="spremium" label="五险一金"></el-table-column>
        <el-table-column prop="subsidies" label="补助金"></el-table-column>
        <el-table-column prop="stax" label="个人所得税"></el-table-column>
        <el-table-column prop="ssalary" label="应发薪资"></el-table-column>
        <el-table-column prop="snetpayroll" label="实发薪资"></el-table-column>
        <el-table-column fixed="right" label="操作" width="130px">
            <template slot-scope="scope">
                <el-button
                size="mini"
                type="primary"
                @click="dialogFormVisible = true;edit(scope.row)" icon="el-icon-edit">编辑</el-button>
            </template>
        </el-table-column>
    </el-table>
    <div class="pagination">
        <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="currentPage" :page-sizes="[5, 10, 15, 20]"
            :page-size="number"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total">
        </el-pagination>
    </div>

    <el-dialog title="编辑员工薪资信息" :visible.sync="dialogFormVisible">
      <el-form :model="form" ref="form">
        <el-form-item label="基本薪资" :label-width="formLabelWidth">
          <el-input v-model="form.pay" autocomplete="off"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="submitForm('form');dialogFormVisible = false">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

  <script>
  import qs from 'qs';
    export default {
      data() {
        return {
          currentPage: 1,
          tableData:[],
          newtableData:[],
          total:null,
          loading: false,
          input: '',
          number:5,
          dialogFormVisible: false,
          form: {
            pay:'',
            sid:''
          },
          formLabelWidth: '120px'
        }
      },
      created(){
        this.getAllsalary();
      },
      methods: {
        handleSizeChange(val) {
          this.number = val       
          this.getTableData()    
          console.log(`每页 ${val} 条`);
        },
        handleCurrentChange(val) {
          this.currentPage = val
          this.getTableData()
          console.log(`当前页: ${val}`);
        },
        //编辑部门
        edit(e){
            this.form.pay=e.spay;
            this.form.sid=e.sid;
        },
        submitForm(formName) {
          this.$refs[formName].validate((valid) => {
            if (valid) {
              this.update();
            } else {
              this.$message.error('修改失败');
              return false;
            }
          });
        },
        //修改员工薪资信息
        update(){
          let info={
            pay:this.form.pay,
            sid:this.form.sid
          }
          this.$http.put('https://7d5184241f35.ngrok.io/api/updatesalary',qs.stringify(info)).then((response)=> { 
            console.log(response.data);
            if(response.data.flag===1){
              this.$message({type: 'success',message: '修改成功!'});
              this.getAllsalary();
            }else{
              this.$message.error('修改失败！');
            }
          });
        },
        //搜索
        querySearch(queryString, cb) { 
          console.log(queryString);
          if (this.input !== "") { 
            this.remindData = []; 
            this.$http.get('https://7d5184241f35.ngrok.io/api/seach2/'+queryString).then((response)=> { 
              this.getHospitalData =response.data; 
              this.getHospitalData.forEach((item) => { 
                let obj = { value: ""}; 
                obj.value = item.sname; 
                this.remindData.push(obj); 
              }); 
              let nameTipsArray = this.remindData; 
              cb(nameTipsArray); 
            }); 
          } 
        },
        search(){
          console.log(this.input);
          if(this.input!=""){
            this.getHospitalData.forEach((item) => { 
                if(item.sname==this.input){
                  this.tableData=[];
                  this.tableData.push(item);
                  this.total=this.tableData.length;
                }
            }); 
          }else if(this.input==""){
            this.tableData=this.newtableData;
            this.total=this.tableData.length;
            this.getTableData();
          }
        },
        open() {
          this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          }).then(() => {
            this.$message({
              type: 'success',
              message: '删除成功!'
            });
          }).catch(() => {
            this.$message({
              type: 'info',
              message: '已取消删除'
            });          
          });
        },
        getAllsalary(){
          this.loading=true;
          this.$http.get("https://7d5184241f35.ngrok.io/api/getAllsalary").then((response)=>{
            if(response.data.length!=0){
              this.total=response.data.length;
              this.newtableData=response.data;
              this.tableData = this.newtableData.slice((this.currentPage - 1)*this.number,this.currentPage*this.number);
              this.loading=false;
            }else{
              this.$message.error('获取数据失败！');
            }
          })
        },
        getTableData(){
          this.tableData = this.newtableData.slice((this.currentPage - 1)*this.number,this.currentPage*this.number);
        },
      }
    }
  </script>
  <style scoped>
  #salary{
    padding: 20px;
  }
  .el-autocomplete{
      width: 92%;
      margin: 20px 0px 20px 5px;
  }
  .fr{
      float: right;
      margin: 20px 20px 20px 0px;
  }
  .el-pagination{
      text-align: center;
  }
  .el-table{
    box-shadow: 0 2px 12px 0 rgb(0 0 0 / 10%);
  }
  </style>